<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class="active"
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class="active"
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="home-content-container fade-in-down-animation">
    <ul class="home-article-list">
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/05/13/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83/">
                        前端基础知识体系-运行环境
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        运行环境网页加载渲染加载资源的形式
HTML代码
媒体文件（图片、视频等）
JavaScript、CSS

加载资源的过程
DNS解析：域名 &#x3D;&gt; IP地址
浏览器根据IP地址向服务器发起http请求
服务器处理http请求，并将结果...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Thu May 13 2021 22:12:52 GMT+0800">2021-05-13</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/05/13/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/05/13/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-HTTP/">
                        前端基础知识体系-HTTP
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        HTTP一些概述
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Thu May 13 2021 14:46:08 GMT+0800">2021-05-13</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/HTTP/">HTTP</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/05/13/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-HTTP/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/05/12/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(%E5%AD%98%E5%82%A8)/">
                        前端基础知识体系-JS-WEB-API(存储)
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        存储在前端缓存策略中，已经着重讨论过HTTP缓存，这里主要讨论浏览器存储。为了对比cookie，这里会加入session。

cookie储存在用户本地终端上的数据，cookie实际上就是一小段的文本信息。
客户端请求服务器，如果服务器需要记录该用户...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Wed May 12 2021 11:14:02 GMT+0800">2021-05-12</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS/">JS</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS-WEB-API/">JS-WEB-API</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/05/12/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(%E5%AD%98%E5%82%A8)/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/05/11/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(Ajax)/">
                        前端基础知识体系-JS-WEB-API(Ajax)
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        Ajax
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

原生实现
get
 123456const xhr = new XMLHttpRequest()xhr.open(&#x27;g...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Tue May 11 2021 15:34:57 GMT+0800">2021-05-11</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS/">JS</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS-WEB-API/">JS-WEB-API</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/05/11/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(Ajax)/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/05/10/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(%E4%BA%8B%E4%BB%B6)/">
                        前端基础知识体系-JS-WEB-API(事件)
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        事件
事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之间交互的桥梁。

事件绑定DOM直接绑定1&lt;button id=&quot;btn&quot; onCl...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Mon May 10 2021 10:11:57 GMT+0800">2021-05-10</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS/">JS</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS-WEB-API/">JS-WEB-API</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/05/10/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(%E4%BA%8B%E4%BB%B6)/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/05/08/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(DOM%E3%80%81BOM)/">
                        前端基础知识体系-JS-WEB-API(DOM、BOM)
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        DOM
DOM（Document Object Model）：文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口。


DOM节点操作获取DOM节点通过元素类型获取123456document.getElementById() // i...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Sat May 08 2021 15:34:27 GMT+0800">2021-05-08</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS/">JS</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS-WEB-API/">JS-WEB-API</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/05/08/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(DOM%E3%80%81BOM)/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/05/06/%E7%AE%80%E6%98%93Promise/">
                        简易Promise
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        我一定不会告诉你，我失眠了，这大半夜的，怎么就睡不着呢？
Promise基础用法123456789101112let promise = new Promise((resolve, reject) =&gt; &#123;  console.log(...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Thu May 06 2021 03:12:05 GMT+0800">2021-05-06</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/05/06/%E7%AE%80%E6%98%93Promise/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/05/04/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS(%E5%BC%82%E6%AD%A5)/">
                        前端基础知识体系-JS(异步)
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        JS运行机制1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
（3）一...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Tue May 04 2021 10:28:14 GMT+0800">2021-05-04</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS/">JS</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/05/04/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS(%E5%BC%82%E6%AD%A5)/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/04/21/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS(%E4%BD%9C%E7%94%A8%E5%9F%9F%E3%80%81%E9%97%AD%E5%8C%85%E3%80%81this)/">
                        前端基础知识体系-JS(作用域、闭包、this)
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        JS - 作用域、闭包、this作用域
作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。作用域是分层的，内层作用域可以访问外层作用域的变量，反之则不行。



泡泡 1 是全局作用域，有标识符 foo；
泡泡 2 是函数作用域 fo...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Wed Apr 21 2021 17:02:34 GMT+0800">2021-04-21</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS/">JS</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/04/21/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS(%E4%BD%9C%E7%94%A8%E5%9F%9F%E3%80%81%E9%97%AD%E5%8C%85%E3%80%81this)/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/04/16/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS(%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B%E3%80%81%E5%8E%9F%E5%9E%8B)/">
                        前端基础知识体系-JS(变量类型、原型)
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        JS - 变量类型和计算
🚨 Notice：ES6新增值类型symbol
typeof能判断哪些类型
识别所有的值类型
识别函数
判断是否是引用类型（具体是什么不知道）

12345678const str = &#x27;string&#x27;...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Fri Apr 16 2021 15:12:53 GMT+0800">2021-04-16</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/JS/">JS</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/04/16/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS(%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B%E3%80%81%E5%8E%9F%E5%9E%8B)/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
    </ul>

    <div class="home-paginator">
        <div class="paginator">
    
        <a class="prev btn"
           href="/"
        >上一页</a>
    

    
        <a class="next btn"
           href="/page/3/"
        >下一页</a>
    
</div>

    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>





<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
